<div
  class="h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-100 border-gray-300"
>
  <a
    [href]="record.metadataUrl"
    [title]="record.abstract"
    [target]="linkTarget"
  >
    <div class="flex flex-col min-h-full">
      <ui-record-thumbnail
        class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
        [thumbnailUrl]="record.thumbnailUrl"
      ></ui-record-thumbnail>

      <div class="flex-grow p-4">
        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
          {{ record.title }}
        </h1>
        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
          {{ record.abstract }}
        </p>
      </div>
    </div>
  </a>
</div>
